<template>
    <div id="kline_4" style="width: 100%; height: 100%; padding-top: 15px;"></div>
</template>

<script>
import { distanceData } from "@/api/msg"
import * as echarts from 'echarts';
export default {
    data(){
        return {
            option: {
                color: ["#5B8FF9", "#69DBAE", "#5070dd", "#b6d634", "#505372", "#ff994d", "#0ca8df", "#ffd10a", "#fb628b", "#785db0", "#3fbe95" ],
            
                tooltip: {
                    showDelay: 0,
                    axisPointer: {
                        show: true,
                        type: 'cross',
                        lineStyle: {
                            type: 'dashed',
                            width: 1
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '7%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        dataZoom: {},
                        brush: {
                            type: ['rect', 'polygon', 'clear']
                        }
                    }
                },
                brush: {},
                legend: {
                    data: ["本周", "上周"],
                    left: 'center',
                    top: 1
                },
                xAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} km'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        axisLabel: {
                            formatter: '{value} min'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '本周',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [
                            [11.2, 51.6], [17.5, 59.0], [19.5, 9.2], [1.0, 63.0], [15.8, 53.6],
                        ],
                    },
                    {
                        name: '上周',
                        type: 'scatter',
                        emphasis: {
                            focus: 'series'
                        },
                        data: [
                            [14.0, 25.6], [15.3, 31.8], [13.5, 10.7], [16.5, 2.6], [17.2, 8.8],
                        ],
                    }
                ]} 
            }
        },
        methods: {
            initCharts(){
                distanceData({}).then(res=>{
                    console.log("k4", res)
                    this.option.series = [
                        {
                            name: '本周',
                            type: 'scatter',
                            emphasis: {
                                focus: 'series'
                            },
                            data: res.thisWeekResultList
                        },
                        {
                            name: '上周',
                            type: 'scatter',
                            emphasis: {
                                focus: 'series'
                            },
                            data: res.lastWeekResultList
                        }
                    ]
                    var chartDom = document.getElementById('kline_4');
                    var myChart = echarts.init(chartDom);
                    myChart.setOption(this.option)
                })
            }
        }
    }
</script>

<style lang="scss">
    
</style>